<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath() + "/";
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<head>
<base href="<%=basePath%>">
<title>朗读排行榜</title>
<meta charset="UTF-8">
<title>朗读亭-朗读排行榜</title>
<link rel="stylesheet" href="css/style2/d_common.css">
<link rel="stylesheet" href="css/style2/common1.css">
<script src="js/jquery-1.9.1.js"></script>
<style type="text/css">
.color1 {
	background: #0c7aae;
}

.color2 {
	background: #1585bc;
}

.color3 {
	background: #0d8dca;
}

.color4 {
	background: #1fa4e5;
}

#rankingList {
	position: relative;
	text-align: center;
}

#rankingList table {
	width: 900px;
	margin: 0 auto;
	border-collapse: collapse;
	border: none;
}

#rankingList table td,#rankingList table th {
	border: none;
	height: 56px;
	color: #fff;
	text-align: center;
	font-size: 16px;
}

#rankingList table td img {
	float: left;
	margin-left: 20px;
}
#rankingList table td img.pic {
	width: 42px;
    border-radius: 50%;
}

#rankingList table td span {
	float: left;
}

#rankingList table {
	border: none;
	color: #fff;
	text-align: center;
}

.abtn {
	display: inline-block;
	width: 110px;
	height: 55px;
	text-align: center;
	line-height: 55px;
}

.pagebtn {
	margin: 20px 15px;
	border-radius: 5px;
	background: #00be59;
	color: #fff;
	font-size: 18px;
	padding-left: 5px
}

.pagebtn img {
	float: left;
	width: 20px;
	margin: 23px 5px 0 15px;
}

#backbtn img {
	width: 13px;
	margin: 18px 5px 0 15px;
}

#backbtn {
	width: 120px;
	background: #ba3433;
}

.xh {
	background-image: url(css/style2/img/rlist_no.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 30px;
	font-size: 18px;
}

#tr1 {
	background-image: url(css/style2/img/rlist_no1.png);
}

#tr2 {
	background-image: url(css/style2/img/rlist_no2.png);
}

#tr3 {
	background-image: url(css/style2/img/rlist_no3.png);
}

td .title {
	width: 290px;
}

td .name {
	width: 100px;
}

td .date {
	width: 200px;
}

td .times {
	width: 100px;
}

td .tdiv {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin: 0 auto;
}
</style>


</head>
<body>
	<div class="header">
		<div class="logo">

			<a href="declaimer/first?guid=${guid}&devicecode=${devicecode}"><img
				src="img/n_logo.png" alt="">&nbsp; </a>
		</div>
		<div class="user">
			<c:if test="${user!=null }">
			<img
				src="${user.pic==null?'img/man.png':user.pic==''?'img/man.png':user.pic }"
				alt="">
			<div class="admin">
				<span class="name">${user.name }</span><span class="number">【${user.cardno
					}】</span>
			</div>
			</c:if>
		</div>
	</div>
	<!--end header-->
	<!--朗读排行榜-->
	<div id="rankingList">
		<table border="" cellspacing="" cellpadding="">
			<thead>
				<tr>
					<th class="color1" width="50">序号</th>
					<th class="color2">头像</th>
					<th class="color1">作品</th>
					<th class="color2">日期</th>
					<th class="color1">卡号</th>
					<th class="color2" width="130">作品观赏</th>
				</tr>
			</thead>
			<tbody id="list">
				
			</tbody>
		</table>


		<a id="prev" class="pagebtn abtn"><img
			src="css/style2/img/rlist_prev.png">上一页</a> <a id="next"
			class="pagebtn abtn"><img src="css/style2/img/rlist_next.png">下一页</a>
		<a id="backbtn" href="declaimer/first?guid=${guid}&devicecode=${devicecode}"
		 class="pagebtn abtn"><img
			src="css/style2/img/rlist_back.png">返回首页</a>
	</div>

	<div class="footer">
		<div class="copyright" style="text-align: center;"><%-- ${c.footer } --%>
		</div>
	</div>
	<script src="js/layer/layer.js"></script>
	<script type="text/javascript">
	$(function(){
		$("#prev").click(function(){
			if(pageNo>1){
				pageNo--;
				searchList();
			}else{
				layer.msg("当前第一页！");
			}
		});
		$("#next").click(function(){
			if(pageNo<allP){
				pageNo++;
				searchList();
			}else{
				layer.msg("当前最后一页！");
			}
		});
	});
	var pageNo =  1;
	var allP = 1;
	searchList();
		function searchList() {
			$.ajax({
				async : false,
				cache : false,
				type : 'post',
				dataType : "json",
				url : 'declaimer/bdlist?guid=${guid }&pageNo='+pageNo,// 请求的action路径
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					//layer.msg("请求失败！");
				},
				success : function(data) {
					var strH = "";
					for(var i=0;i<10;i++){
						
						if(data.list[i]==null){
							strH += '<tr><td id="tr'+i+'" class="color'+(((i+1)%2)*2+1)+' xh"></td>'
					+'<td class="color'+(((i+1)%2)*2+2)+'"><div class="name tdiv"></div></td>'
					+'<td class="color'+(((i+1)%2)*2+1)+'"><div class="title tdiv"></div>'
					+'</td><td class="color'+(((i+1)%2)*2+2)+'"><div class="date tdiv"></div>'
					+'</td><td class="color'+(((i+1)%2)*2+1)+'"><div class="times tdiv"></div></td>'
					+'<td class="color'+(((i+1)%2)*2+2)+'"></td></tr>';
						}else{
							strH += '<tr><td id="tr'+i+'" class="color'+(((i+1)%2)*2+1)+' xh">'+(i+1)+'</td>'
					+'<td class="color'+(((i+1)%2)*2+2)+'"><div class="name tdiv"><img class="pic" src="'+data.list[i].pic+'"/></div></td>'
					+'<td class="color'+(((i+1)%2)*2+1)+'"><div class="title tdiv">'+data.list[i].title+'</div>'
					+'</td><td class="color'+(((i+1)%2)*2+2)+'"><div class="date tdiv">'+data.list[i].readdate.substring(0,10)+'</div>'
					+'</td><td class="color'+(((i+1)%2)*2+1)+'"><div class="times tdiv">'+data.list[i].cardno+'</div></td>'
					+'<td class="color'+(((i+1)%2)*2+2)+'" onclick="window.location.href=\''+
					'<%=basePath%>declaimer/bddetail?guid=${guid}&devicecode=${devicecode}&id='+data.list[i].id+'\'"'
					+' ><img src="css/style2/img/rlist_begin.png" /><span>点击播放</span></td></tr>';
						}
					}
					$("#list").html(strH);
					allP = data.totalPage;
				}
			});
		}
	</script>

</body>
</html>
